<template>
	<view class="registrationContent">
		<view class="wrap">
			<view class="wrapInput">
				<u-form labelPosition="left" :model="model1">
					<u-form-item label="头像:" labelWidth="100" borderBottom>
						<view class="iptbox form-flex upLoad" style="height: 35px;">
							<view class="ImgBtn" type="primary" @click="takePhoto"></view>
							<image class="hxImg" :src="src"></image>
						</view>
					</u-form-item>
					<u-form-item label="昵称:" borderBottom>
						<u-input v-model="model1.nickname" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入昵称">
						</u-input>
					</u-form-item>
					<u-form-item label="姓名:" labelWidth="80" borderBottom>
						<u-input v-model="model1.name" placeholderStyle='color:#9E9E9E' inputAlign='right' border="none"
							placeholder="请输入姓名">
						</u-input>
					</u-form-item>
					<u-form-item label="性别" prop="radiovalue1" borderBottom>
						<u-radio-group v-model="model1.sex">
							<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="所在公司:" labelWidth="80" borderBottom>
						<u-input v-model="model1.company" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入所在企业">
						</u-input>
					</u-form-item>
					<u-form-item label="职位:" borderBottom>
						<u-input v-model="model1.duty" placeholderStyle='color:#9E9E9E' inputAlign='right' border="none"
							placeholder="请输入职务">
						</u-input>
					</u-form-item>
					<u-form-item label="邮箱:" borderBottom>
						<u-input v-model="model1.mailbox" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入邮箱">
						</u-input>
					</u-form-item>
					<u-form-item label="手机号码:" labelWidth="80" borderBottom>
						<u-input v-model="model1.phone" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入手机号码">
						</u-input>
					</u-form-item>
				</u-form>
				<view class="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled1: false, //短信
				model1: {
					nickname: '',
					name: '',
					company: '',
					sex: '',
					mailbox: '',
					phone: '',
					duty: '',
					password: '',
					nextPassword: '',
				},

				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
			}
		},
		methods: {
			// 性别选择
			sexSelect(e) {
				this.model1.sex = e.name
				this.$refs.form1.validateField('sex')
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 上传头像
			takePhoto() {
				uni.chooseImage({
					key: 'usertoken',
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'], //从相册选择
					success: res => {
						const tempFilePaths = res.tempFiles;
						this.file = this.file.concat(tempFilePaths);

						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]

						console.log(imageSrc)
						uni.uploadFile({
							url: `${this.$serverUrl}/api/userindex/avatar`,
							filePath: imageSrc,
							fileType: 'image',
							name: 'UpFile',
							header: {
								'conetnt-type': "application/x-www-form-urlencoded",
								"token": this.token,
								'appid': this.$APPID,
								'appsecret': this.$APPSECRET
							},
							success: (res) => {
								console.log('uploadImage success, res is:', res.data)
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
								const data = JSON.parse(res.data);
								this.src = `${this.$serverUrl}` + data.data.ImgUrl
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.wrapInput {
		u--input {
			padding-right: 10rpx;
		}
	}

	.submit {
		width: 80%;
		height: 80rpx;
		background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
		border-radius: 50rpx;
		margin: 60rpx auto 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 80rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.wrapBottom {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;

		navigator {
			color: #353535;
		}
	}

	/deep/.u-form-item__body__left {
		font-weight: bold;
	}

	/deep/.u-form-item__body {
		padding: 20rpx 30rpx !important;
	}

	/deep/.u-radio-group--row {
		justify-content: flex-end !important;
	}

	/deep/.u-radio:nth-child(2) {
		margin-right: 0 !important;
	}

	.upLoad {
		position: relative;
	}

	.ImgBtn {
		position: absolute;
		right: 0;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		border: none;
		outline: none;
		background-color: transparent;
		z-index: 1;
		border: 1px solid #f5f5f5;
	}

	.hxImg {
		position: absolute;
		right: 0;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		object-fit: cover;
	}

	.hxImg img {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		object-fit: cover;
	}
</style>
